<template>
  <div class="background"></div>
  <div id="wrap" class="wrap" :style="{ height: screenHeight + 'px' }">
    <div id="main" :style="{ transform:'translate3d(0px,'+ nowTop + 'vh, 0px)'}">
      <div id="page1" class="page1">
        <video autoplay loop :src="video"
               style="width: auto;height: auto;min-width: 100%;min-height: 100%; object-fit: cover">
        </video>
      </div>
      <div id="page2" class="page2" style="transform: scale(0.65);">
        <div id="item" class="item-1">
          <div class="xcx-wrap">
            <div class="xcx"></div>
          </div>
          <div class="title-wrap">
            <div class="title-icon"></div>
            <div class="title-content">
              <div class="title-bg"></div>
              <div class="title">{{ titleObj.title1 }}</div>
              <div class="title-detail">{{ titleObj.subheading1 }}</div>
            </div>
          </div>
          <div class="mobile-prototype">
            <div class="down" style="transform: translateY(0%);" v-for="(item,index) in imgList" :key="index">
              <div :class="'mobile-item mobile'+(index+1)">
                <img :src="item" alt class="mobile">
              </div>
            </div>
          </div>
          <div class="nav-wrap" @click="pushPage('/fabricate')">
            <div class="nav-content">
              "了解更多清苑产品与创造"
            </div>
          </div>
        </div>
      </div>
      <div id="page3" class="page3" style="transform: scale(0.65)">
        <div class="fade-in-down">
          <div class="content-wrap">
            <div class="qxy-wrap">
              <div class="qxy"></div>
            </div>
            <div class="title-wrap">
              <div class="title-icon"></div>
              <div class="title-content">
                <div class="title-bg"></div>
                <div class="title">{{ titleObj.title2 }}</div>
                <div class="title-detail">{{ titleObj.subheading2 }}</div>
              </div>
            </div>
            <div class="content">
              <div class="carousel-wrap">
                <div class="ant-carousel">
                  <a-carousel
                    indicator-type="slider"
                    indicator-position="bottom"
                    show-arrow="never"
                    :auto-play="true"
                    animation-name="fade"
                    :style="{ width: '100%', height: '100%', }">
                    <a-carousel-item v-for="image in images">
                      <img :src="image" :style="{ width: '100%'}" />
                    </a-carousel-item>
                  </a-carousel>
                </div>
              </div>
              <div class="right-wrap">
                <div class="title">{{ titleObj.title3 }}</div>
                <div class="slg">{{ titleObj.subheading3 }}</div>
                <div class="slg-content">{{ titleObj.introduce3 }}</div>
                <div class="people">
                  <div class="person-wrap" style="height: 116px; margin-right: 61px;">
                    <div>
                        <span class="person-num"
                              style="color: #43b5f8; font-size: 75px; line-height: 55px;">{{ peopSum.num1 }}</span>
                      <span class="person-ren" style="font-size: 28px; font-weight: 600;">人</span>
                    </div>
                    <div class="person-tag"
                         style="color: #0497e3; font-size: 29px; line-height: 32px; font-weight: 600; letter-spacing: 5px;">
                      工作室成员数
                    </div>
                  </div>
                  <div class="person-wrap" style="height: 116px;">
                    <div>
                        <span class="person-num"
                              style="color: #43b5f8; font-size: 75px; line-height: 55px;">{{ peopSum.num2 }}</span>
                      <span class="person-ren" style="font-size: 28px; font-weight: 600;">人</span>
                    </div>
                    <div class="person-tag"
                         style="color: #0497e3; font-size: 29px; line-height: 32px; font-weight: 600; letter-spacing: 5px;">
                      毕业成员数
                    </div>
                  </div>
                </div>
                <div class="nav-wrap" @click="pushPage('/boy')">
                  <div class="nav-content">"走近清苑少年的世界"</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div id="page4" class="page4" style="transform: scale(0.65)">
        <div class="fade-in-down">
          <div class="content-wrap">
            <div class="qxy-wrap">
              <div class="qxy"></div>
            </div>
            <div class="title-wrap">
              <div class="title-icon"></div>
              <div class="title-content">
                <div class="title-bg"></div>
                <div class="title">{{titleObj.title4}}</div>
                <div class="title-detail">{{titleObj.subheading4}}</div>
              </div>
            </div>
            <div class="content">
              <div class="img-wrap"></div>
              <div class="right-wrap">
                <div class="passage-wrap" >
                  <div class="passage" v-for="(item,index) in taleList" :key="index">
                    <div class="bg-wrap"
                         :style="'background-image: url('+ item.img+');background-repeat: no-repeat;background-size: 100% 100%;'"></div>
                    <div class="passage-content">
                      <div class="passage-title">{{item.title}}</div>
                      <div class="passage-detail">{{item.detail}}</div>
                    </div>
                  </div>
                </div>
                <div class="nav-wrap" @click="pushPage('/tale')">
                  <div class="nav-content">
                    "聆听清苑更多故事"
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div id="page5" class="page5" style="transform: scale(0.65)">
        <div class="content-wrap">
          <div class="xcx-wrap">
               <div class="xcx"></div>
          </div>
          <div class="title-wrap">
            <div class="title-icon"></div>
            <div class="title-content">
              <div class="title-bg"></div>
              <div class="title">{{titleObj.title5}}</div>
              <div class="title-detail">{{titleObj.subheading5}}</div>
            </div>
          </div>
          <div class="work-list">
            <div class="list-item " v-for="(item,index) in workList" :key="index">
              <div class="img-wrap">
                <img :src="item.img" alt>
              </div>
              <div class="item-content-active">
                <div class="item-indicator"></div>
                <div class="item-title">{{item.title}}</div>
                <div class="item-msg">{{item.detail}}</div>
              </div>
            </div>
          </div>
          <div class="join" @click="pushPage('/about')">加入我们</div>
        </div>
      </div>
      <Footer/>
    </div>
  </div>
</template>


<script setup>
import { onMounted, onUnmounted, reactive, ref, defineEmits } from 'vue'
import { throttle } from 'lodash' // 引入lodash的throttle用于节流
import { useRouter } from 'vue-router'
import Footer from '@/components/footer.vue';




// 定义响应式数据
const video = "https://statice.s3.cn-north-1.jdcloud-oss.com/vide.mp4?AWSAccessKeyId=JDC_F9E896E936B90397B57C9254FF52&Expires=1750912328&Signature=2nk9fmucRYWI1e1eRazycLsUMOY%3D"
const screenWeight = ref(0)
const screenHeight = ref(0)
const index = ref(1)
const curIndex = ref(1)
const startTime = ref(0)
const endTime = ref(0)
const nowTop = ref(0)
const pageNum = ref(0)
const router = useRouter()
const titleObj = reactive({
  title1: '清苑智造：做自己喜欢的产品',
  subheading1: '日夜点滴坚守的力量与汗水，让每个青春瞬间精彩绽放',
  title2: '清苑少年：成长是一场团战',
  subheading2: '世代里的每个高光时刻，都由无数坚守的身影所铸就',
  title3: '个人发展',
  subheading3: '做彼此的得力队友。',
  introduce3: '在这个团队里，大家讨论、交流、学习、进步、共事...写你感兴趣的项目，为期末报告单设计UI，策划你喜欢的用户交流活动，平时再水水群、聊聊天，如果恰好赶上了秋招还能蹭上学长学姐们一顿又一顿的offer饭。',
  title4: '清苑故事：无限热爱与可能',
  subheading4: '不忘初心，以青春之名，为信息化建设进步做贡献',
  title5: '加入清苑：遇见更好的你',
  subheading5: '不忘初心，以青春之名，为信息化建设进步做贡献',
})
const taleList = reactive([
  {
    id:0,
    title:'《那些年的清苑工作室》',
    detail:'叙述他在清苑的美好回忆。',
    img:'https://img0.baidu.com/it/u=1033018635,7901815&fm=253&fmt=auto&app=138&f=JPEG?w=750&h=500'
  },
  {
    id:0,
    title:'《那些年的清苑工作室》',
    detail:'叙述他在清苑的美好回忆。',
    img:'https://img0.baidu.com/it/u=1033018635,7901815&fm=253&fmt=auto&app=138&f=JPEG?w=750&h=500'
  },
  {
    id:0,
    title:'《那些年的清苑工作室》',
    detail:'叙述他在清苑的美好回忆。',
    img:'https://img0.baidu.com/it/u=1033018635,7901815&fm=253&fmt=auto&app=138&f=JPEG?w=750&h=500'
  }
])
const images = ref([
  "https://statice.s3.cn-north-1.jdcloud-oss.com/img/join1.png?AWSAccessKeyId=JDC_F9E896E936B90397B57C9254FF52&Expires=1750912775&Signature=HWMERdUGGCBxNpaEB2aX2va8NQk%3D",
  "https://statice.s3.cn-north-1.jdcloud-oss.com/img/join2.png?AWSAccessKeyId=JDC_F9E896E936B90397B57C9254FF52&Expires=1750912787&Signature=69ygpt18UrKtEePVcXfg6yLfKf0%3D"
])
const workList = reactive([
  {
    id:0,
    title:'后端工程师',
    detail:'负责工作室团队项目后端开发工作，跟进研发规范和技术体系建设。',
    img:"https://statice.s3.cn-north-1.jdcloud-oss.com/img/hou.png?AWSAccessKeyId=JDC_F9E896E936B90397B57C9254FF52&Expires=1750913422&Signature=0kC0V1dLI8h8MTmHvNG%2BImTr%2Fbg%3D",
  },
  {
    id:1,
    title:'前端工程师',
    detail:'负责工作室团队项目前端开发工作，通过工具与组件的开发与持续优化。',
    img:"https://statice.s3.cn-north-1.jdcloud-oss.com/img/qiand.png?AWSAccessKeyId=JDC_F9E896E936B90397B57C9254FF52&Expires=1750913439&Signature=7E%2F4hEBTzjgsCKqGj7mzKe3yLls%3D",
  },
  {
    id:2,
    title:'画师&设计师',
    detail:'画师负责完成形象、风格的绘制工作，完成产品界面的部分绘图以及青柚系文创的设计。',
    img:"https://statice.s3.cn-north-1.jdcloud-oss.com/img/hua.png?AWSAccessKeyId=JDC_F9E896E936B90397B57C9254FF52&Expires=1750913456&Signature=NPUR5GiWQUVbU0pnDaZspUP6EhY%3D",
  },
  {
    id:3,
    title:'产品发行运营',
    detail:'负责qing清苑工作室的活动策划、新媒体运营和宣传推广工作，加强工作室内部跨团队协作。',
    img:"https://statice.s3.cn-north-1.jdcloud-oss.com/img/yun.png?AWSAccessKeyId=JDC_F9E896E936B90397B57C9254FF52&Expires=1750913469&Signature=ZiKpE55b6cB6dN4bUlIK36PHrwI%3D",
  }
])
const peopSum = reactive({
  num1: 93,
  num2: 36
})
const imgList = ref([
  "https://statice.s3.cn-north-1.jdcloud-oss.com/img/img1.png?AWSAccessKeyId=JDC_F9E896E936B90397B57C9254FF52&Expires=1750912607&Signature=ObiZT0H8hvaHkxt0jelqhPymv2Y%3D",
  "https://statice.s3.cn-north-1.jdcloud-oss.com/img/img2.png?AWSAccessKeyId=JDC_F9E896E936B90397B57C9254FF52&Expires=1750912637&Signature=iWIjKqphA3aJ9KsauIwHgSmbVlk%3D",
  "https://statice.s3.cn-north-1.jdcloud-oss.com/img/img3.png?AWSAccessKeyId=JDC_F9E896E936B90397B57C9254FF52&Expires=1750912651&Signature=xXMLHpKPxi7528qv2Gk3tR3lE4Q%3D",
  "https://statice.s3.cn-north-1.jdcloud-oss.com/img/img4.png?AWSAccessKeyId=JDC_F9E896E936B90397B57C9254FF52&Expires=1750912666&Signature=s6lnTwC6t49ORvrz4LEMfnzR1OM%3D",
  "https://statice.s3.cn-north-1.jdcloud-oss.com/img/img5.png?AWSAccessKeyId=JDC_F9E896E936B90397B57C9254FF52&Expires=1750912686&Signature=9tt0DV%2BBLxpHm3C6LZsdbwTmqV4%3D"
])
const emit = defineEmits(['path']);
// 声明变量
let main = null
let obj = []
// 计算属性或方法
const toPage = (indexValue, height) => {
  if (indexValue !== curIndex.value) {
    if(nowTop.value === -430){
      nowTop.value = -500
    }
    nowTop.value = nowTop.value + height
    if(nowTop.value === -500){
      nowTop.value = -430
    }
    curIndex.value = indexValue
  }
}
// 初始化方法
onMounted(() => {
  //获取屏幕宽度和高度，并将其赋值给screenWeight和screenHeight变量。
  screenWeight.value = document.documentElement.clientWidth
  screenHeight.value = document.documentElement.clientHeight

  //获取页面中所有div元素，并遍历它们。
  main = document.getElementById('main')
  obj = Array.from(document.getElementsByTagName('div'))
  obj.forEach(div => {
    //如果某个div元素的类名为page，则将其高度设置为屏幕高度。
    if (div.className === 'page') {
      div.style.height = `${screenHeight.value}px`
    }
  })
  //获取页面中所有类名为page的元素的数量，并将其赋值给pageNum变量。
  // pageNum.value = document.querySelectorAll('.page').length;

  // 添加滚动事件监听器
  const scrollHandler = throttle((event) => {
    //定义一个节流函数scrollHandler，用于限制滚动事件的触发频率。
    scrollFun(event)
  }, 1500)

  if (/(Firefox)/i.test(navigator.userAgent)) {
    document.addEventListener('DOMMouseScroll', scrollHandler, false)
  } else {
    document.addEventListener('wheel', scrollHandler, { passive: false })
  }

  //在组件卸载时，移除滚动事件监听器
  onUnmounted(() => {
    document.removeEventListener('DOMMouseScroll', scrollHandler, false)
    document.removeEventListener('wheel', scrollHandler, { passive: false })
  })
})


// 事件处理函数
const navTo = (a) => {
  console.log(index.value, a)
  index.value = a
  toPage(a)
  // 注意：原代码中的this.active未定义，此处未转换
}

const scrollFun = (event) => {
  //获取当前时间
  startTime.value = new Date().getTime()
  //获取事件对象中的垂直滚动距离deltaY的相反数，若不存在则取detail。
  let delta = (event.deltaY * -1) || event.detail
  //判断两次滚动事件之间的时间差是否大于1000毫秒，以避免快速滚动时的误操作。
  if ((startTime.value - endTime.value) > 1000) {
    if (delta > 0 && nowTop.value < 0) {
      //若滚动距离为正且当前页面顶部距离大于等于下一页的顶部距离，则将页面索引加1，并调用toPage函数切换到下一页
      index.value++
      toPage(index.value, delta)
    } else if (delta < 0 && nowTop.value >= -400) {
      //若滚动距离为负且当前页面顶部距离小于0，则将页面索引减1，并调用toPage函数切换到上一页。
      index.value--
      toPage(index.value, delta)
    }
    //获取当前时间并赋值给endTime，用于计算时间差
    endTime.value = new Date().getTime()
  }
}

function pushPage(page) {
  router.push(page)
  emit('path',page)
}
</script>

<style>
@import '@/assets/css/YousheBiaoTiHei.css';


.background {
  position: fixed; /* 固定定位 */
  top: 0;
  left: 0;
  width: 100%; /* 覆盖全宽 */
  height: 100%; /* 覆盖全高 */
  z-index: -1; /* 置于底层 */
  background-image: url('../../assets/img/back.png'); /* 背景图片路径 */
  background-size: cover; /* 背景图片填充整个容器 */
  background-position: center; /* 图片居中 */
}

.wrap {
  position: relative; /* 或者absolute，取决于你的布局需求 */
  overflow-y: auto; /* 允许垂直滚动 */
  /* 可能需要设置高度，具体取决于你的设计 */
}

html, body {
  height: 100%;
}

body, ul, li, a, p, div {
  /*慎删*/
  padding: 0px;
  margin: 0px;
}

#wrap {
  overflow: hidden;
  width: 100%;
}

#main {
  height: 100vh;
  transition: all .3s ease-in-out;
  width: 100vw;
}

.page1 {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
  width: 100vw;
  height: 100vh;
}

.page2 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;

  .item-1 {
    display: flex;
    flex-direction: column;
    height: 1145px;
    margin-top: -51px;
    position: relative;
    width: 1958px;

    .xcx-wrap {
      display: flex;
      flex-direction: column;
      height: 1139px;
      justify-content: flex-end;
      left: -6%;
      position: absolute;
      width: 292px;
      z-index: 999;

      .xcx {
        background-image: url('../../assets/img/xcx.png');
        background-repeat: no-repeat;
        background-size: 100% auto;
        height: 472px;
        width: 292px;
      }
    }

    .title-wrap {
      align-items: center;
      display: flex;

      .title-icon {
        border: 8px solid #ffffff;
        border-radius: 50%;
        height: 38px;
        margin-right: 23px;
        width: 38px;
      }

      .title-content {
        align-items: flex-start;
        display: flex;
        flex-direction: column;
        height: 122px;
        position: relative;
        text-align: justify;
        text-align-last: justify;
        width: 891px;

        .title-bg {
          background-image: url('../../assets/img/titleBack.png');
          background-repeat: no-repeat;
          background-size: 100% 100%;
          height: 60px;
          width: 891px;
          user-select: none;
        }

        .title {
          color: #4d4950;
          font-family: HYYakuHei-55W;
          font-size: 63px;
          height: 56px;
          line-height: 56px;
          margin: 0 auto;
          position: absolute;
          text-align: justify;
          top: 31px;
          width: 873px;
          user-select: none;
        }

        .title-detail {
          color: #4d4950;
          font-family: PingFang-SC-Regular;
          font-size: 25px;
          height: 25px;
          line-height: 25px;
          position: absolute;
          text-align: justify;
          top: 106px;
          width: 865px;
          user-select: none;
        }
      }
    }

    .mobile-prototype {
      display: flex;
      height: 857px;
      margin-top: 86px;

      .down {
        transition: all .7s;

        .mobile-item {
          height: 687px;
          width: 337px;
          //border: 1px solid red;
        }

        .mobile {
          height: 750px;
          width: 390px;
        }

        .mobile1 {
          margin: 78px 0 0 56px;
        }

        .mobile2 {
          margin-left: 38px;
        }

        .mobile3 {
          margin: 78px 0 0 38px;
        }

        .mobile4 {
          margin-left: 38px;
        }

        .mobile5 {
          margin: 78px 0 0 56px;
        }
      }
    }

    .nav-wrap {
      align-items: center;
      border: 3px solid #ffffff;
      border-radius: 30px;
      display: flex;
      justify-content: center;
      margin: 0 auto;
      padding: 5px 20px;
      width: 502px;
      background-color: #3da6df;

      .nav-content {
        align-items: center;
        color: #ffffff;
        cursor: pointer;
        display: flex;
        font-family: PingFang-SC-Regular;
        font-size: 30px;
        height: 40px;
        letter-spacing: 6px;
        line-height: 40px;
        text-align: center;
        z-index: 100;
        user-select: none;
        background-color: #3da6df;
      }
    }

    .nav-wrap:hover{
      border: 3px solid #3da6df;
      background-color: #ffffff;
      .nav-content{
        color: #3da6df;
        background-color: #ffffff;
      }
    }
  }
}

.page3 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;

  .fade-in-down {
    -webkit-animation-duration: .9s;
    animation-duration: .9s;
    -webkit-animation-name: fadeInDown;
    animation-name: fadeInDown;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;

    .content-wrap {
      position: relative;

      .qxy-wrap {
        position: absolute;
        right: -5%;
        bottom: -10%;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        width: 279px;
        height: 1040px;
        z-index: 999;

        .qxy {
          background-image: url('@/assets/img/qxy.png');
          width: 279px;
          height: 449px;
          background-repeat: no-repeat;
          background-size: 100% auto;
          margin-top: 45.5%;
        }
      }

      .title-wrap {
        align-items: center;
        display: flex;

        .title-icon {
          border: 8px solid #ffffff;
          border-radius: 50%;
          height: 38px;
          margin-right: 23px;
          width: 38px;
        }

        .title-content {
          align-items: flex-start;
          display: flex;
          flex-direction: column;
          height: 122px;
          position: relative;
          text-align: justify;
          text-align-last: justify;
          width: 891px;

          .title-bg {
            background-image: url('../../assets/img/titleBack.png');
            background-repeat: no-repeat;
            background-size: 100% 100%;
            height: 60px;
            width: 891px;
          }

          .title {
            color: #4d4950;
            font-family: HYYakuHei-55W;
            font-size: 63px;
            height: 56px;
            line-height: 56px;
            margin: 0 auto;
            position: absolute;
            text-align: justify;
            top: 31px;
            width: 873px;
          }

          .title-detail {
            color: #4d4950;
            font-family: PingFang-SC-Regular;
            font-size: 25px;
            height: 25px;
            line-height: 25px;
            position: absolute;
            text-align: justify;
            top: 106px;
            width: 865px;
          }
        }
      }

      .content {
        align-items: center;
        background-color: #fbfbfb;
        border-radius: 40px;
        display: flex;
        height: 812px;
        margin: 107px 0 0 44px;
        overflow: hidden;
        width: 1945px;

        .carousel-wrap {
          height: 812px;
          overflow: hidden;
          width: 1245px;
          display: flex;

          .ant-carousel {
            font-feature-settings: "tnum";
            box-sizing: border-box;
            color: rgba(0, 0, 0, .85);
            font-size: 14px;
            font-variant: tabular-nums;
            line-height: 1.5715;
            list-style: none;
            margin: 0;
            padding: 0;
            width: 100%;

          }
        }
        .right-wrap {
          display: flex;
          flex: 1 1;
          flex-direction: column;
          flex-wrap: nowrap;
          height: 100%;

          .title {
            color: #4d4950;
            font-family: PingFangSC-Medium;
            font-size: 48px;
            height: 47px;
            letter-spacing: 2px;
            line-height: 47px;
            margin: 103px 0 0 56px;
            width: 207px;
          }

          .slg {
            color: #4d4950;
            font-family: PingFangSC-Light;
            font-size: 48px;
            height: 45px;
            letter-spacing: 2px;
            line-height: 45px;
            margin: 28px 0 0 56px;
            width: 450px;
          }

          .slg-content {
            color: #4d4950;
            font-family: PingFangSC-Thin;
            font-size: 30px;
            height: 189px;
            letter-spacing: 2px;
            line-height: 36px;
            margin: 38px 0 0 56px;
            width: 564px;
          }

          .people {
            display: flex;
            margin: 73px 0 0 56px;

            .person-wrap {
              display: flex;
              flex-direction: column;
              justify-content: space-between;

              .person-num {
                font-family: HYYakuHei-85W;
                font-weight: 400;
                width: 75px;
              }

              .person-ren {
                color: #43b5f8;
                font-family: HYYakuHei-85W;
                letter-spacing: 4px;
              }

              .person-tag {
                font-family: PingFang-SC-Regular;
              }
            }

            .person-wrap {
              display: flex;
              flex-direction: column;
              justify-content: space-between;

              .person-num {
                font-family: HYYakuHei-85W;
                font-weight: 400;
              }

              .person-ren {
                color: #43b5f8;
                font-family: HYYakuHei-85W;
                letter-spacing: 4px;
              }

              .person-tag {
                font-family: PingFang-SC-Regular;
              }
            }
          }

          .nav-wrap {
            align-items: center;
            border: 3px solid #3da6df;
            border-radius: 30px;
            display: flex;
            justify-content: space-around;
            margin: 62px 0 0 56px;
            padding: 5px 20px;
            width: 430px;
            background-color: #ffffff;

            .nav-content {
              align-items: center;
              color: #3da6df;
              cursor: pointer;
              display: flex;
              font-family: PingFang-SC-Regular;
              font-size: 30px;
              height: 40px;
              letter-spacing: 6px;
              line-height: 40px;
              text-align: center;
              background-color: #ffffff;
            }
          }
          .nav-wrap:hover{
            border: 3px solid #ffffff;
            background-color: #3da6df;
            .nav-content{
              color: #ffffff;
              background-color: #3da6df;
            }
          }
        }
      }
    }
  }
}

.page4 {
  align-items: center;
  display: flex;
  flex-direction: column;
  height: 100%;
  justify-content: center;
  width: 100%;
  .fade-in-down{
    -webkit-animation-duration: .9s;
    animation-duration: .9s;
    -webkit-animation-name: fadeInDown;
    animation-name: fadeInDown;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
    .content-wrap{
      display: flex;
      flex-direction: column;
      height: 1145px;
      margin-top: -51px;
      position: relative;
      width: 1958px;
      .qxy-wrap{
        bottom: -5%;
        display: flex;
        flex-direction: column;
        height: 1041px;
        justify-content: flex-end;
        left: -7%;
        position: absolute;
        width: 343px;
        z-index: 999;
        .qxy{
          background-image: url('@/assets/img/qxy1.png');
          background-repeat: no-repeat;
          background-size: 100% auto;
          height: 443px;
          width: 343px;
        }
      }
      .title-wrap{
        align-items: center;
        display: flex;
        .title-icon{
          border: 8px solid #fdfdfd;
          border-radius: 50%;
          height: 38px;
          margin-right: 23px;
          width: 38px;
        }
        .title-content {
          align-items: flex-start;
          display: flex;
          flex-direction: column;
          height: 122px;
          position: relative;
          text-align: justify;
          text-align-last: justify;
          width: 891px;

          .title-bg {
            background-image: url('../../assets/img/titleBack.png');
            background-repeat: no-repeat;
            background-size: 100% 100%;
            height: 60px;
            width: 891px;
          }

          .title {
            color: #4d4950;
            font-family: HYYakuHei-55W;
            font-size: 63px;
            height: 56px;
            line-height: 56px;
            margin: 0 auto;
            position: absolute;
            text-align: justify;
            top: 31px;
            width: 873px;
          }

          .title-detail {
            color: #4d4950;
            font-family: PingFang-SC-Regular;
            font-size: 25px;
            height: 25px;
            line-height: 25px;
            position: absolute;
            text-align: justify;
            top: 106px;
            width: 865px;
          }
        }
      }
      .content{
        align-items: center;
        background-color: #fbfbfb;
        border-radius: 40px;
        display: flex;
        height: 812px;
        margin: 107px 0 0 44px;
        width: 1945px;
        .img-wrap{
          background-image: url('@/assets/img/left-img.png');
          background-repeat: no-repeat;
          background-size: 100% 100%;
          border-bottom-left-radius: 40px;
          border-top-left-radius: 40px;
          height: 100%;
          width: 1221px;
        }
        .right-wrap{
          display: flex;
          flex: 1 1;
          flex-direction: column;
          flex-wrap: nowrap;
          height: 100%;
          .passage-wrap{
            display: flex;
            flex-direction: column;
            height: 624px;
            margin: 0 0 0 60px;
            .passage{
              align-items: center;
              display: flex;
              margin-top: 51px;
              width: 597px;
              .bg-wrap{
                height: 142px;
                width: 252px;
              }
              .passage-content{
                height: 118px;
                margin-left: 35px;
                width: 350px;
                .passage-title{
                  font-family: PingFangSC-Thin;
                  font-size: 24px;
                  font-weight: 600;
                }
                .passage-detail{
                  font-family: PingFangSC-Thin;
                  font-size: 24px;
                  line-height: 28px;
                }
              }
            }
          }
          .nav-wrap{
            align-items: center;
            border: 3px solid #3da6df;
            border-radius: 30px;
            display: flex;
            justify-content: space-around;
            margin: 50px 0 0 60px;
            padding: 5px 20px;
            width: 380px;
            .nav-content{
              align-items: center;
              color: #3da6df;
              cursor: pointer;
              display: flex;
              font-family: PingFang-SC-Regular;
              font-size: 30px;
              height: 40px;
              letter-spacing: 6px;
              line-height: 40px;
              text-align: center;
            }
          }
          .nav-wrap:hover{
            border: 3px solid #ffffff;
            background-color: #3da6df;
            .nav-content{
              color: #ffffff;
              background-color: #3da6df;
            }
          }
        }
      }
    }
  }
}

.page5 {
  align-items: center;
  display: flex;
  flex-direction: column;
  height: 100%;
  justify-content: center;
  width: 100%;
  .content-wrap{
    display: flex;
    flex-direction: column;
    height: 1145px;
    margin-top: -51px;
    position: relative;
    width: 1958px;
    .xcx-wrap{
      bottom: -5%;
      display: flex;
      flex-direction: column;
      height: 1037px;
      justify-content: flex-end;
      position: absolute;
      right: -7%;
      width: 347px;
      z-index: 999;
      .xcx{
        background-image: url('@/assets/img/xcx1.png');
        background-repeat: no-repeat;
        background-size: 100% auto;
        height: 418px;
        margin-top: 45.5%;
        width: 347px;
      }
    }
    .title-wrap{
      align-items: center;
      display: flex;
      .title-icon{
        border: 8px solid #ffffff;
        border-radius: 50%;
        height: 38px;
        margin-right: 23px;
        width: 38px;
      }
      .title-content{
        align-items: flex-start;
        display: flex;
        flex-direction: column;
        height: 122px;
        position: relative;
        text-align: justify;
        text-align-last: justify;
        width: 891px;
        .title-bg{
          background-image: url('../../assets/img/titleBack.png');
          background-repeat: no-repeat;
          background-size: 100% 100%;
          height: 60px;
          width: 891px;
        }
        .title{
          color: #4d4950;
          font-family: HYYakuHei-55W;
          font-size: 63px;
          height: 56px;
          line-height: 56px;
          margin: 0 auto;
          position: absolute;
          text-align: justify;
          top: 31px;
          width: 873px;
        }
        .title-detail{
          color: #4d4950;
          font-family: PingFang-SC-Regular;
          font-size: 25px;
          height: 25px;
          line-height: 25px;
          position: absolute;
          text-align: justify;
          top: 106px;
          width: 865px;
        }
      }
    }
    .work-list{
      align-items: center;
      display: flex;
      height: 677px;
      justify-content: space-between;
      margin-top: 101px;
      width: 1977px;
      .list-item:hover{
        box-shadow: 0 38px 96px rgba(0, 0, 0, .1);
        .img-wrap{
          img {
            -webkit-transform: scale(1.15);
          }
        }
        .item-content-active{
          .item-indicator{
            opacity: 1;
          }
        }
      }

      .list-item{
        border-radius: 40px;
        box-shadow: 0 7px 15px rgba(0, 0, 0, .1);
        cursor: pointer;
        display: flex;
        flex-direction: column;
        height: 677px;
        margin-right: 40px;
        overflow: hidden;
        transition: all .5s;
        width: 429px;
        .img-wrap{
          height: 298px;
          overflow: hidden;
          width: 100%;
          img {
            border-top-left-radius: 40px;
            border-top-right-radius: 40px;
            width: 100%;
            height: 298px;
            object-fit: cover;
            transition: all 0.5s;
          }
        }
        .item-content-active{
          background-color: #fff;
          background-repeat: no-repeat;
          background-size: 10px 361px;
          border-bottom-left-radius: 40px;
          border-bottom-right-radius: 40px;
          flex: 1 1;
          padding: 30px;
          position: relative;
          transition: all .5s;
          width: 100%;
          .item-indicator{
            background-image: linear-gradient(0deg, #5bdbaa, #33abbb 48%, #2d82a9);
            border-bottom-left-radius: 40px;
            height: 100%;
            left: 0;
            opacity: 0;
            position: absolute;
            top: 0;
            transition: all .5s;
            width: 13px;
          }
          .item-title {
            font-family: YouSheBiaoTiHei;
            font-size: 50px;
            line-height: 64px;
            color: #2d82a9;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            margin: 21px 0;
          }
          .item-msg {
            font-family: PingFangSC-Semibold;
            font-size: 26px;
            line-height: 42px;
            color: #313131;
          }
        }
      }
    }
    .join{
      background: linear-gradient(90deg, #1eb7d2, #0eefb3);
      border-radius: 50px;
      color: #fff;
      cursor: pointer;
      font-size: 32px;
      height: 56px;
      line-height: 56px;
      margin-top: 100px;
      text-align: center;
      width: 275px;
    }
  }
}

.Footer{
  background: #f5f5f7;
  box-sizing: border-box;
  padding-bottom: 64px;
  padding-top: 46px;
  width: 100%;
  .footer-inner{
    margin-left: 50%;
    max-width: 1200px;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    width: 85%;
    .footer-top-wrap{
      align-items: center;
      display: flex;
      .footer-title{
        align-content: center;
        align-items: center;
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: flex-start;
        width: 100%;
        .title-icon{
          background-image: url();
          background-position: 50%;
          background-repeat: no-repeat;
          background-size: 100%, 100%;
          height: 42px;
          width: 124px;
        }
        .title-divider{
          background-color: #000;
          height: 25px;
          margin: 0 35px;
          width: 2px;
        }
        .title-text{
          color: #000;
          font-size: 18px;
          font-weight: 400;
          line-height: 25px;
          text-align: center;
        }
      }
      .qq-connect{
        width: 98px;
        .qq-qrcode{
          height: auto;
          margin-bottom: 11px;
          width: 98px;
        }
      }
    }
    .footer-info{
      align-content: flex-start;
      align-items: center;
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      justify-content: space-between;
      margin-top: 37px;
      p{
        color: rgba(0, 0, 0, .8);
        font-size: 14px;
        font-weight: 300;
        line-height: 20px;
        margin: 0;
        vertical-align: middle;
      }
      .info-divider{
        background-color: rgba(0, 0, 0, .8);
        height: 1px;
        margin: 9px 0;
        width: 100%;
      }
      a{
        color: rgba(0, 0, 0, .8);
        display: inline-block;
        text-decoration: none;
      }
    }
  }
}

</style>
